<!-- 用户管理页 -->
<template>
  <div style="height:6vh;background-color:#fff;padding: 10px 20px;">
    <span style="line-height: 60px;font-size: 20px;">用户管理</span>
    <el-button type="primary" style="float:right;margin-top:10px;" @click="beforeAddUser">新增用户</el-button>
  </div>
<!--  &lt;!&ndash; 保存用户数据弹窗 &ndash;&gt;-->
  <el-dialog
      :title="dialogTitle"
      style="width: 1000px;padding:40px;" v-model="dialogVisible" :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名"
                      v-model="saveUserForm.username" :disabled="saveUserForm.id!=null"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input placeholder="请输入手机号" v-model="saveUserForm.phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="邮箱">
            <el-input placeholder="请输入邮箱" v-model="saveUserForm.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄">
            <el-input placeholder="请输入年龄" v-model="saveUserForm.age"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="职位">
            <el-select placeholder="请选择" v-model="saveUserForm.posts" @change="loadLeader">
              <el-option
                  v-for="item in postOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="负责人">
            <el-select placeholder="请选择领导" v-model="saveUserForm.personResponsibleId">
              <el-option v-for="item in leaderOptions"
                         :label="item.username" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="性别">
            <el-radio-group v-model="saveUserForm.gender">
              <el-radio border label="男" value="1" style="margin:0;"></el-radio>
              <el-radio border label="女" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="部门">
            <el-select placeholder="请选择部门" v-model="saveUserForm.department">
              <el-option  v-for="item in departArr"
              :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveUser">保存</el-button>
    </template>
  </el-dialog>


  <!-- 用户搜索卡片 -->
  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="用户搜索" style="width: 270px;">
        <el-input placeholder="请输入用户名"
                  v-model="searchUserForm.username" ></el-input>
      </el-form-item>

      <el-form-item label="部门" style="width: 290px;">
        <el-select placeholder="请选择部门"
                   v-model="searchUserForm.department">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="职位" style="width: 290px;">
        <el-select placeholder="请选择职位"
                   v-model="searchUserForm.posts">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="selectUser">搜索</el-button>
      </el-form-item>
    </el-form>
  </el-card>


  <!-- 用户数据表格卡片 -->
  <el-card style="margin:20px;">
    <el-table :data="userList">
      <el-table-column label="编号" type="index" width="80" align="center"></el-table-column>
      <el-table-column label="用户名" prop="username" align="center"></el-table-column>
      <el-table-column label="手机号" prop="phone" align="center"></el-table-column>
      <el-table-column label="部门" prop="department" align="center" :formatter="formatDepartment"></el-table-column>
      <el-table-column label="职位" prop="posts" align="center" :formatter="formatPosts"></el-table-column>
      <el-table-column label="加入时间" prop="createTime" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="editPassword(scope.row.id)">编辑</el-button>
          <el-button type="primary" link @click="deletePassword(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>

import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";

//定义新增用户对话框的方法
const dialogVisible = ref(false);

//每次点击"新增用户"按钮时调用的方法
const beforeAddUser = ()=>{
  dialogTitle.value = '新增用户';
  dialogVisible.value = true;
}
//定义取消按钮的方法
const handleClose = () => {
  dialogVisible.value = false;
  saveUserForm.value= {};
}

//定义新增用户标题的方法
const dialogTitle = ref('新增用户');

//定义搜索表单的方法
const searchUserForm = ref({username: '', department: '', level: ''});

//定义保存用户表单的方法
const saveUserForm = ref({
  username: '',
  phone: '',
  email: '',
  age: '',
  posts: '',
  personResponsibleId: '',
  gender: '',
  department: ''});

//定义选择领导的方法
const leaderOptions = ref([]);

//定义加载可选领导数据的方法
const loadLeader = ()=>{
  //在每次加载领导数据前,都需要将之前遗留的直属领导id和可选领导数组数据清空
  //防止出现因新加载出来的领导数据里没有之前选择的人,而显示不出来领导姓名的情况
  saveUserForm.value.parentId = '';
  leaderOptions.value = [];
  let personResponsibleId = parseInt(saveUserForm.value.posts)+10;
  axios.get(BASE_URL+'/v1/user/select?posts='+ personResponsibleId).then((response)=>{
    if (response.data.code == 2000) {
      leaderOptions.value = response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
//定义部门选项的方法
const departmentOptions = ref([

]);
// 页面挂载时加载部门数据
onMounted(() => {
  loadDepartments();
});

//定义保存用户得方法
const userList = ref([]);
//定义查询用户的方法
const selectUser = () => {
  let data = qs.stringify(searchUserForm.value);
  axios.get(BASE_URL + '/v1/user/select?' + data).then((response)=>{
    if (response.data.code == 2000) {
      userList.value = response.data.data;
      console.log(userList.value);
    }else {
      ElMessage.error(response.data.msg);
    }
  })
};
//定义重置搜索的方法
const resetSearch = () => {
  searchUserForm.value = {};
  selectUser();
}
//一刷新页面就出现
onMounted(()=>{
  selectUser();
})
// 加载部门数据的方法
const loadDepartments = () => {
  departmentOptions.value = [];
  let department = saveUserForm.value.posts;
  axios.get(BASE_URL + '/v1/user/select?posts=' + department).then((response) => {
    if (response.data.code == 2000) {
      departmentOptions.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  });
};
const departArr = ref([
  {
    label: '工程部',
    value: '10'
  },
  {
    label: '质量部',
    value: '20'
  },
  {
    label: '技术部',
    value: '30'
  },
  {
    label: '物资设备部',
    value: '40'
  },
  {
    label: '安全管理部',
    value: '50'
  },
  {
    label: '项目班子',
    value: '60'
  }
])
//定义格式部门的方法
const departmentMapping = {
  '10': '工程部',
  '20': '质量部',
  '30': '技术部',
  '40': '物资设备部',
  '50': '安全管理部',
  '60': '项目班子'
}
//定义格式职位的方法
const postMapping = {
  '10': '责任工程师',
  '20': '质量工程师',
  '30': '技术员',
  '40': '物资员',
  '50': '安全员',
  '60': '项目总工'
};
// 修改后的职位格式化方法
const formatPosts = (row, column, cellValue) => {
  return postMapping[cellValue] || cellValue;
};
// 更新后的部门格式化方法
const formatDepartment = (row, column, cellValue) => {
  return departmentMapping[cellValue] || cellValue;
};
// 职位选项数据
const postOptions = ref([
  { label: '责任工程师', value: '10' },
  { label: '质量工程师', value: '20' },
  { label: '技术员', value: '30' },
  { label: '物资员', value: '40' },
  { label: '安全员', value: '50' },
  { label: '项目总工', value: '60' }
]);
//定义编辑的方法
const editPassword = (id) => {
  dialogTitle.value = '编辑用户';
  dialogVisible.value = true;
  axios.get(BASE_URL + '/v1/user/select?id=' + id).then((response) => {
    if (response.data.code == 2000) {
      saveUserForm.value = response.data.data[0];
      console.log(saveUserForm.value);
      let personResponsibleId = parseInt(saveUserForm.value.posts)+10;
      axios.get(BASE_URL+'/v1/user/select?posts='+ personResponsibleId).then((response)=>{
        if (response.data.code == 2000) {
          leaderOptions.value = response.data.data;
        }else{
          ElMessage.error(response.data.msg);
        }
      })
    } else {
      ElMessage.error(response.data.msg);
    }
  });
}
//定义删除的方法
const deletePassword = (id) => {
  axios.post(BASE_URL + '/v1/user/delete/' + id).then((response) => {
    if (response.data.code == 2000) {
      ElMessage.success('删除成功!');
      selectUser();
    } else {
      ElMessage.error(response.data.msg);
    }
  });
}
</script>

<style scoped>

</style>